<template>
    <h2>全国大学信息列表</h2>
    <ul>
        <li v-for="(item, index) in clist" :key="'clist'+index">
            <h3 @click="gotCdetial(index)">{{ item.area }} 有 {{ item.counts }} 所高校 - 点击查看高校详情</h3>
        </li>
    </ul>
</template>

<script setup>
import { onMounted, ref } from 'vue';
// 导入axios
import axios from 'axios';
import { useRouter } from 'vue-router';
const clist = ref([]);
onMounted(async () => {
    let res = await axios.get("https://api.i-lynn.cn/college");
    clist.value = res.data.data.list
})

// Vue Router 的 编程式导航
// 以前是this.$router.push(路由+id),现在用了useRouter方法后就如下
const router = useRouter();
function gotCdetial(index){
    // Vue 路由传参的几种方式
    // 1. 动态路由传参，在地址中可以直接显示，刷新页面不会丢失
    router.push("/Daxue/"+index);
    // 2. 基于 query 查询字符串，在地址栏中直接显示，刷新页面也不会丢失
    // router.push("/daxue?id="+index)
    // 3. 直接传参，在地址栏中不会直接显示，同时刷新页面后，数据也会丢失
    // 目前随之版本的更新，这种方式不能用了，如果要使用，请修改成 动态路由传参
    // router.push({
    //     // 注意这里需要使用  name
    //     name: "about",
    //     params: {
    //         id: index
    //     }
    // })

}
</script>

<style lang="scss" scoped>

</style>